import React from 'react';
import DataTable from '../../UI/DataTable';
import PageContainer from '../../UI/PageContainer';
import './CompetitionPage.css';

const CompetitionPage = () => {
  const data = [
    {
      id: 1,
      projectName: '全国大学生数学建模竞赛',
      projectId: 'COMP001',
      competitionName: '全国大学生数学建模竞赛',
      competitionLevel: '国家级',
      awardRank: '一等奖',
      competitionHost: '教育部',
      competitionGen: '第30届',
      competitionMember: '张三, 李四',
      character: '队长',
      holdYear: '2023-09-15',
      awardYear: '2023-09-20',
      awardIns: '教育部',
      keywords: '数学建模, 竞赛, 一等奖',
      files_certificate: [
        { name: '获奖证书.pdf', size: 2048576, type: 'application/pdf' }
      ],
      files_pictures: [
        { name: '比赛现场.jpg', size: 5120000, type: 'image/jpeg' },
        { name: '颁奖仪式.png', size: 4096000, type: 'image/png' }
      ]
    },
    {
      id: 2,
      projectName: 'ACM程序设计竞赛',
      projectId: 'COMP002',
      competitionName: 'ACM国际大学生程序设计竞赛',
      competitionLevel: '国际级',
      awardRank: '二等奖',
      competitionHost: 'ACM',
      competitionGen: '第47届',
      competitionMember: '王五, 赵六',
      character: '队员',
      holdYear: '2023-05-15',
      awardYear: '2023-05-20',
      awardIns: 'ACM',
      keywords: '程序设计, 算法, 竞赛',
      files_certificate: [
        { name: 'ACM获奖证书.pdf', size: 1536000, type: 'application/pdf' }
      ],
      files_pictures: [
        { name: '比赛现场1.jpg', size: 6144000, type: 'image/jpeg' },
        { name: '比赛现场2.jpg', size: 5120000, type: 'image/jpeg' },
        { name: '团队合影.png', size: 3072000, type: 'image/png' }
      ]
    }
  ];

  const stats = [
    { value: 2, label: '竞赛获奖' },
    { value: 1, label: '国家级' },
    { value: 1, label: '国际级' }
  ];

  const columns = [
    {
      key: 'projectName',
      title: '项目名称',
      width: '250px',
      render: (value, row) => (
        <div>
          <div className="competition-page__name">{value}</div>
          <div className="competition-page__keywords">{row.keywords}</div>
        </div>
      )
    },
    { key: 'projectId', title: 'ID', width: '120px' },
    { key: 'competitionName', title: '竞赛名称', width: '150px' },
    { key: 'competitionLevel', title: '竞赛级别', width: '100px' },
    { key: 'awardRank', title: '奖项', width: '100px' },
    { key: 'competitionHost', title: '主办方', width: '120px' },
    { key: 'competitionGen', title: '届数', width: '80px' },
    { key: 'competitionMember', title: '参赛人员', width: '150px' },
    { key: 'character', title: '个人角色', width: '100px' },
    { key: 'holdYear', title: '举办年份', width: '100px' },
    { key: 'awardYear', title: '获奖年份', width: '100px' },
    { key: 'awardIns', title: '授予单位', width: '120px' },
    {
      key: 'actions',
      title: '操作',
      width: '120px',
      render: () => (
        <div>
          <a className="data-table__action-link data-table__action-link--edit">编辑</a>
          <a className="data-table__action-link data-table__action-link--delete">删除</a>
        </div>
      )
    }
  ];

  return (
    <PageContainer className="competition-page">
      <DataTable
        data={data}
        columns={columns}
        showSearch={true}
        title="竞赛获奖"
        titleIcon="competition"
        editType="competition"
        searchPlaceholder="搜索竞赛名称、奖项..."
        filterOptions={['国家级', '省级', '校级']}
        onNew={() => console.log('新建竞赛获奖')}
        onFilter={() => console.log('筛选竞赛获奖')}
        showPagination={true}
        pageSize={20}
        className="competition-page__table"
      />
    </PageContainer>
  );
};

export default CompetitionPage;
